<template>
  <div class="con-box uc-order">
    <!-- 导航 -->
    <div class="uc-nav">
      <div class="nav-box">
        <div
          :class="['nav-item', isComm == '0' ? 'active' : '']"
          @click="isComm = '0'"
        >
          <span class="text" @click="getOrderList(0)">{{$t('pendinEvaluation')}}</span>
          <i class="line"></i>
        </div>
        <div
          :class="['nav-item', isComm == '1' ? 'active' : '']"
          @click="isComm = '1'"
        >
          <span class="text" @click="getOrderList(1)">{{$t('evaluated')}}</span>
          <i class="line"></i>
        </div>
      </div>
    </div>
    <!-- /导航 -->
    <!-- 订单列表 -->
    <div class="order-list" v-if="isComm == 0">
      <div class="order-table">
        <table cellspacing="0" cellpadding="0" class="box">
          <tbody>
            <tr class="box-tit">
              <th>{{$t('products')}}</th>
              <th width="110">{{$t('quantity')}}</th>
              <th width="120" class="pr">{{$t('priceOne')}}</th>
              <th width="130">{{$t('totalAll')}}</th>
              <th width="130">{{$t('status')}}</th>
              <th width="130">{{$t('operation')}}</th>
            </tr>
          </tbody>
          <tbody v-for="(order, index) in orderList" :key="index">
            <tr class="box-space">
              <td colspan="6"></td>
            </tr>
            <tr class="box-hd">
              <td colspan="6">
                <div class="order-number">
                  {{$t('orderNumberT')}}：
                  <span class="num">{{ order.orderNumber }}</span>
                </div>
                <a :href="'/shopIndex?sid=' + order.shopId" class="shop">
                  <span class="shop-icon"></span>
                  {{ order.shopName }}
                </a>
                 <a @click="toChat(order.shopId,order.shopName)" href="javascript:void(0);" class="btn-im" style="float: left;"></a>
              </td>
            </tr>
            <tr
              class="box-tr"
              v-for="(orderItem, index) in order.orderItemDtos"
              :key="index"
            >
              <td>
                <div class="goods-info">
                  <a
                    href="javascript:void(0);"
                    @click="toOrderDetail(order.orderNumber)"
                    class="img"
                  >
                    <img :src="orderItem.pic" alt />
                  </a>
                  <div class="name-sku">
                    <a
                      href="javascript:void(0);"
                      @click="toOrderDetail(order.orderNumber)"
                      class="name"
                      >{{ orderItem.prodName }}</a
                    >
                    <span class="sku">{{ orderItem.skuName }}</span>
                  </div>
                </div>
              </td>
              <td>
                <div class="goods-number">×{{ orderItem.prodCount }}</div>
              </td>
              <td class="pr">
                <div class="amount">
                  <span class="price">￥{{ orderItem.price }}</span>
                </div>
              </td>
              <td
                :rowspan="order.orderItemDtos.length"
                v-if="index == 0"
                class="bl"
              >
                <div class="amount">
                  <span class="price">￥{{ order.actualTotal }}</span
                  >{{$t('ucOrder.onlinePayment')}}
                </div>
              </td>
              <td
                :rowspan="order.orderItemDtos.length"
                v-if="index == 0"
                class="bl"
              >
                <div class="status">
                  <div :class="['text', order.status > 4 ? '' : 'no-finish']">
                    {{
                      [
                        '',
                        $t('pendingPayment'),
                        $t('pendingDelivery'),
                        $t('pendingReceipt'),
                        $t('pendinEvaluation'),
                        $t('completed'),
                        $t('canceled')
                      ][order.status]
                    }}
                  </div>
                  <a
                    href="javascript:void(0);"
                    @click="toOrderDetail(order.orderNumber)"
                    class="order-detail"
                    >{{$t('ucOrder.orderDetails')}}</a
                  >
                </div>
              </td>
              <td
                :rowspan="order.orderItemDtos.length"
                v-if="index == 0"
                class="bl"
              >
                <div class="action">
                  <a
                    href="javascript:void(0);"
                    @click="orderComment(orderItem)"
                    :class="['action-btn', 'active']"
                    >{{$t('ucOrder.postComment')}}</a
                  >
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 页码 -->
      <pagination
        v-model="current"
        :pages="pages"
        @changePage="getCommentPage"
      ></pagination>
      <!-- 页码 -->
    </div>
    <!-- /订单列表 -->

    <!-- 订单列表 -->
    <div class="order-list" v-if="isComm == 1">
      <div class="order-table">
        <table cellspacing="0" cellpadding="0" class="box">
          <tbody>
            <tr class="box-tit">
              <th>{{$t('products')}}</th>
              <th width="110">{{$t('quantity')}}</th>
              <th width="120">{{$t('priceOne')}}</th>
              <th width="150">{{$t('time')}}</th>
              <th width="130">{{$t('operation')}}</th>
            </tr>
          </tbody>
          <tr class="box-space">
            <td colspan="5"></td>
          </tr>
          <tbody v-for="(order, index) in orderList" :key="index">
            <tr class="box-tr">
              <td>
                <div class="goods-info">
                  <a
                    href="javascript:void(0);"
                    @click="toOrderDetail(order.orderNumber)"
                    class="img"
                  >
                    <img :src="order.pic" alt />
                  </a>
                  <div class="name-sku">
                    <a
                      href="javascript:void(0);"
                      @click="toOrderDetail(order.orderNumber)"
                      class="name"
                      >{{ order.prodName }}</a
                    >
                    <span class="sku">{{ order.skuName }}</span>
                  </div>
                </div>
              </td>
              <td>
                <div class="goods-number">×{{ order.prodCount }}</div>
              </td>
              <td>
                <div class="amount">
                  <span class="price">￥{{ order.price }}</span>
                </div>
              </td>
              <td>
                <div class="amount">
                  <span class="price">{{ order.recTime }}</span>
                </div>
              </td>
              <td>
                <div class="action">
                  <a
                    href="javascript:void(0);"
                    @click="orderComment(order)"
                    :class="['action-btn', 'default']"
                    >{{$t('ucOrder.viewComments')}}</a
                  >
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 页码 -->
      <pagination
        v-model="current"
        :pages="pages"
        @changePage="getCommentPage"
      ></pagination>
      <!-- 页码 -->
    </div>
    <!-- /订单列表 -->
    <!-- 空列表提示 -->
    <div class="empty" v-if="!orderList.length">
      <div class="img">
        <img src="~/assets/images/emptyPic/order-empty.png" alt />
      </div>
      <div class="action">
        <div class="text">{{$t('ucOrder.noRelatedOrders')}}</div>
        <nuxt-link to="/" class="btn">{{$t('ucOrder.lookOthers')}}</nuxt-link>
      </div>
    </div>
    <!-- /空列表提示 -->
  </div>
</template>

<script>
import Pagination from '~/components/pagination'
export default {
  data () {
    return {
      orderCountData: {},
      orderList: [],
      isComm: this.$route.query.isComm || 0,
      pages: 0, // 总页数
      current: this.$route.query.current || 1, // 当前页数
    }
  },
  components: {
    Pagination
  },

  mounted () {
    // 设置网页标题
    document.title = this.$i18n.t('ucOrder.evaluationSunshine')
    this.getOrderList(this.isComm)
  },
  methods: {

    /**
     * 跳转客服
     */
    toChat(shopId,shopName) {
      let routeUrl = this.$router.resolve({
        path: '/chat?shopId=' + shopId + (shopName==null?'&chatType=1':'')
      });
      window.open(routeUrl.href, 'view_window');
    },

    /**
     * 获取评论订单列表
     */
    getOrderList (isComm) {
      this.$router.push({ path: '/user-center/uc-comments', query: { isComm: isComm } })
      if (this.isComm != isComm) {
        this.current = 1
      }
      this.isComm = isComm
      if (isComm == 0) {
        this.$axios.get('/p/myOrder/myOrderComment', {
          params: {
            current: this.current,
            size: 10,
            commStatus: 0
          }
        }).then(({ data }) => {
          this.orderList = data.records
          this.pages = data.pages
        })
      } else {
        this.$axios.get('/p/myOrder/myOrderItemsComment', {
          params: {
            current: this.current,
            size: 15,
            commStatus: 1
          }
        }).then(({ data }) => {
          this.orderList = data.records
          this.pages = data.pages
        })
      }
    },
    /**
    * 请求评论订单列表
    */
    getCommentPage () {
      this.getOrderList(this.isComm)
    },

    /**
     * 跳转订单详情
     */
    toOrderDetail (orderNumber) {
      this.$router.push({ path: '/order-detail', query: { orderNumber: orderNumber } })
    },
    /**
     * 发表评论
     */
    orderComment (orderItem) {
      if (this.isComm == 0) {
        this.$router.push({ path: '/write-comments', query: { orderNumber: orderItem.orderNumber, isComm: this.isComm } })
      } else {
        this.$router.push({ path: '/write-comments', query: { orderItemId: orderItem.orderItemId, isComm: this.isComm } })
      }
    },
  }
}
</script>

<style scoped src='~/assets/css/uc-order.css'></style>
<style scoped src='~/assets/css/user-center.css'></style>
